<template>
	<view class="page">
		<!-- 申请项目 -->
		<view class="Applying_for">
			<view class="title">
				申请项目
			</view>
			<view class="projectlists">
				<view class="projectlist" v-for="(item,index) in medicine" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo">
								药
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：{{item.amount}}剂
					</view>
					<view class="tags">
						<view class="tag" v-for="(tag,n) in item.tags" :style="n==1?'background-color: rgba(255, 240, 237, 1); color: #FF4D4F;':''" :key="n">
							{{tag}}
						</view>
						<!-- <view class="tag" >
							限购5剂
						</view> -->
					</view>
				</view>
				<!-- <view class="projectlist">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo">
								药
							</view>
							<view class="project_title">
								云南白药胶囊 0.5g*20片
							</view>
						</view>
						<view class="price">
							￥10.80
						</view>
					</view>
					<view class="amount">
						数量：1盒
					</view>
					<view class="tags">
						<view class="tag">
							处方药
						</view>
					</view>
				</view> -->
				<view class="projectlist" v-for="(item,index) in inspext" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo" style="background-color: rgba(255, 242, 232, 1);color: #FF7A45;">
								查
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：1次
					</view>
				</view>
				<view class="projectlist" v-for="(item,index) in test" :key="index">
					<view class="lineOne">
						<view class="titleInfo">
							<view class="logo" style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
								验
							</view>
							<view class="project_title">
								{{item.title}}
							</view>
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}
						</view>
					</view>
					<view class="amount">
						数量：1次
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="Paymentmethod">
			<view class="title">
				支付方式
			</view>
			<uv-radio-group v-model="radiovalue" class="methods" @change="see">
				<view class="method">
					<view class="name">
						自费支付
					</view>
					<uv-radio name="自费支付"></uv-radio>
				</view>
				<view class="method">
					<view class="name">
						医保支付
					</view>
					<uv-radio name="医保支付"></uv-radio>
				</view>
			</uv-radio-group>
		</view>
		<!-- 底部合计区域 -->
		<view class="amount_to">
			<view class="subtotal">
				<text class="heji">
					合计：
				</text>
				<text class="redText">￥</text>
				<text class="redText" style="font-size: 44rpx;">{{subtatol.toString().split('.')[0]}}.</text>
				<text class="redText">{{subtatol.toString().split('.')[1]}}</text>
			</view>
			<button class="payment" @click="pay">立即支付</button>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const patientid = ref(0)
	const medicine = reactive([])	//开单药品
	const inspext = reactive([])	//开单检查
	const test = reactive([])		//开单检验
	const subtatol = ref(0)			//开单总价
	const recordid = ref(0)			//开单id
	onLoad((option)=>{
		recordid.value = option.recordid
		api('/applyselectreacord',{
			record_id:option.recordid
		}).then(res=>{
			medicine.push(...JSON.parse(res.dataes[0].medicine))
			inspext.push(...JSON.parse(res.dataes[0].inspect))
			test.push(...JSON.parse(res.dataes[0].test))
			subtatol.value = res.dataes[0].subtotal
			console.log(res)
			patientid.value = res.dataes[0].patient_id
		}).catch(err=>{
			console.log(err)
		})
	})
	// 支付方式切换
	const radiovalue = ref('自费支付')
	const see = () => {
		console.log(radiovalue.value)
	}
	// 立即支付
	const pay = () => {
		uni.showLoading({
			title:'支付中...'
		})
		
		setTimeout(()=>{
			uni.hideLoading();
			uni.showToast({
				title:'支付成功'
			})
			api('/appchangestate',{
				status:'已支付',
				record_id:recordid.value
			},'POST').then(res=>{
				console.log(res)
			}).catch(err=>{
				console.log(err)
			})
			api('/appchangetime',{
				record_id:recordid.value
			},'POST').then(res=>{
				if(res.state==200){
					uni.navigateTo({
						url:'/pages/Billing_details/Billing_details?recordid='+recordid.value+'&patientid='+patientid.value
					})
				}
			}).catch(err=>{
				console.log(err)
			})
		},2000)
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f2f2f2;
		min-height: 100vh;
		padding: 30rpx;
		padding-bottom: 164rpx;
		box-sizing: border-box;
		.Applying_for{
			width: 100%;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 26rpx 44rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.title{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				font-weight: 700;
				color: #333;
			}
			.projectlists{
				.projectlist{
					padding-top: 40rpx;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #f2f2f2;
					.lineOne{
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.titleInfo{
							display: flex;
							height: 44rpx;
							align-items: center;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #000;
							.logo{
								width: 34rpx;
								height: 44rpx;
								line-height: 44rpx;
								border-radius: 4rpx;
								background-color: rgba(240, 245, 255, 1);
								color: #2F54EB;
								text-align: center;
								font-size: 24rpx;
							}
							.project_title{
								font-size: 32rpx;
								line-height: 44rpx;
								margin-left: 10rpx;
							}
						}
						.price{
							color: #FF4D4F;
						}
					}
					.amount{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						color: #7f7f7f;
						margin-top: 20rpx;
					}
					.tags{
						margin-top: 14rpx;
						display: flex;
						align-items: center;
						.tag{
							padding: 8rpx 9rpx;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							// line-height: 44rpx;
							background-color: rgba(240, 247, 255, 1);
							color: #007AFF;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
		// 支付方式
		.Paymentmethod {
			width: 100%;
			height: 312rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx 44rpx;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			color: #000;
			margin-top: 30rpx;
			.title {
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		
			.methods {
				display: block !important;
		
				.method {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
		// 底部合计区域
		.amount_to{
			width: 100%;
			height: 134rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 36rpx;
			box-sizing: border-box;
			.subtotal{
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #333;
				.redText{
					color: #F5222D;
				}
			}
			.payment{
				width: 238rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E6%94%AF%E4%BB%98/u2525.svg');
				background-size: cover;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #fff;
				margin: 0 !important;
				
			}
		}
	}       
</style>
